import React from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Empty, Button } from 'react-vant';
import { Tabs } from 'react-vant'
const Index: React.FC = () => {
  const navigate = useNavigate()
  return (
    <div>
      <NavBar style={{ background: '#fff' }} onBack={() => navigate(-1)}>我的医生</NavBar>
      <Tabs active={0}>
        <Tabs.TabPane title='服务过我的医生'>
          <Empty description="暂无“服务过我的医生”">
            <h2 style={{ textAlign: 'center' }}>
              <span style={{ color: 'orangered' }}>30W+</span>注册医生，<span style={{ color: 'orangered' }}>2W+</span>名医专家
            </h2>
            <p style={{ textAlign: 'center', fontSize: '16px', marginTop: '20px', width: '340px', height: '50px', }}>报到即可绑定医生，医生可提供门诊预约、在线咨询、开方续方、健康随访和科普健康知识服务</p>
            <Button style={{ width: '350px', height: '50px', borderRadius: '10px', fontSize: '20px', marginTop: '20px' }} type="primary" >
              去报到医生
            </Button>
          </Empty>
        </Tabs.TabPane>
        <Tabs.TabPane title='我关注的医生' >
          <Empty description="暂无“我关注的医生”">
            <Button style={{ width: '350px', height: '50px', borderRadius: '10px', fontSize: '20px', marginTop: '20px' }} type="primary" >
              去关注医生
            </Button>
          </Empty>
        </Tabs.TabPane>
      </Tabs>
    </div>
  )
}

export default Index